<template>
    <div class="mybody">
      <div class="head">
        <p class="t3">会员充值</p>
        <p class="t4">充值成功后无法退回,请与客户确认后操作</p>
      </div>
      <div class="step">
        <el-steps align-center :active="data.active" finish-status="success">
          <el-step title="填写充值信息" />
          <el-step title="确认充值信息" />
          <el-step title="充值成功" />
        </el-steps>
        <div v-if="data.active === 1">
          <div class="form">
            <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto"
              class="demo-ruleForm" :size="formSize" status-icon>
              <el-form-item label="会员账号">
                <el-input v-model="data.phone" @change="hh" maxlength="11" />
              </el-form-item>
              <el-form-item label="会员姓名">
                <el-input v-model="data.name" disabled />
              </el-form-item>
              <el-form-item label="充值金额">
                <el-input type="number" @change="hhh" v-model="data.money" />
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div v-if="data.active === 2">
          <el-alert class="alert" title="确认充值后，资金将直接打入对方账户，无法退回。" type="warning" effect="dark" show-icon />
          <div class="mytable">
            <div class="tr1">
              <div class="title">
                充值账号
              </div>
              <div class="content1">
                {{ data.tableData.phone }}
              </div>
            </div>
            <div class="tr2">
              <div class="title">
                会员名称
              </div>
              <div class="content1">
                {{ data.tableData.name }}
              </div>
            </div>
            <div class="tr3">
              <div class="title">
                会员余额
              </div>
              <div class="content1">
                {{ data.tableData.balance }}元
              </div>
            </div>
            <div class="tr4">
              <div class="title">
                充值金额
              </div>
              <div class="content2">
                {{ data.tableData.money }}元
              </div>
            </div>
          </div>
        </div>
        <div v-if="data.active === 3">
          <div>
            <img class="img" style="width: 65px;" src="@/assets/images/success.png" alt="" />
            <p class="t1">操作成功</p>
            <p class="t2">预计两小时内到账</p>
          </div>
        </div>
  
        <el-button style="margin-top: 12px" @click="next" v-if="data.active != 3" type="primary"
          :disabled="isdisabled">下一步</el-button>
        <div v-if="data.active === 1">
          <hr class="myhr">
          <div class="mysm">
            <p class="sm">说明</p>
            <p class="sm1">会员账号</p>
            <p class="sm2">如果账号不存在则不能进行下一步。</p>
            <p class="sm3">充值金额</p>
            <p class="sm4">充值金额不能小于1,充值前需与客户核实再进行下一步。</p>
          </div>
        </div>
  
  
        <div v-if="data.active === 3">
          <el-button style="margin-top: 12px" @click="again" type="primary">再转一笔</el-button>
          <div class="mytable">
            <div class="tr1">
              <div class="title">
                充值账号
              </div>
              <div class="content1">
                {{ data.tableData.phone }}
              </div>
            </div>
            <div class="tr2">
              <div class="title">
                会员名称
              </div>
              <div class="content1">
                {{ data.tableData.name }}
              </div>
            </div>
            <div class="tr3">
              <div class="title">
                会员余额
              </div>
              <div class="content1">
                {{ data.tableData.balance }}元
              </div>
            </div>
            <div class="tr4">
              <div class="title">
                充值金额
              </div>
              <div class="content2">
                {{ data.tableData.money }}元
              </div>
            </div>
          </div>
        </div>
  
  
        <el-button v-if="data.active === 2" style="margin-top: 12px" @click="prev">上一步</el-button>
      </div>
  
    </div>
  </template>
  
  <script setup lang="ts">
  import { GetName, VIPRecharge } from '@/api/vip'
  import type { dictionary_Dto } from '@/Dto/Request/dic/dictionary_Dto'
  import { ElLoading, ElMessage, ElNotification } from 'element-plus'
  import { reactive, ref, watchEffect } from 'vue'
  
  const data = reactive<dictionary_Dto>({
    active: 1,
    phone: '',
    name: '无',
    money: 1,
    isdisabled: false,
    tableData: {
      phone: '',
      name: '',
      money: '',
      balance: ''
    }
  })
  const hh = async () => {
    if (data.phone.length == 11) {
      var result = await GetName({ phone: data.phone })
      data.name = result.data.name
      data.tableData.balance = result.data.balance
      if (result.data == "无") {
        data.name = "账号不存在"
      }
    }
  }
  const again = async () => {
    data.active = 1;
    data.phone = "";
    data.name = "无";
    data.money = 1;
    data.tableData.phone = "";
    data.tableData.name = "";
    data.tableData.money = "";
    data.tableData.balance = "";
  
  }
  const hhh = async () => {
    if (data.money <= 0) {
      data.money = 1
    }
  }
  const prev = () => [
    data.active--
  ]
  const next = async () => {
    if (data.active == 1 && data.name == "无") {
      ElMessage({
        message: '请填写完账号!',
        type: 'warning',
      })
    }
    //active=1
    if (data.active == 1 && (data.name != "无" && data.money >= 1)) {
      var result = await GetName({ phone: data.phone })
      data.isdisabled = true
      data.tableData.name = result.data.name;
      data.isdisabled = false
      if (data.name == "账号不存在" || data.name == "无") {
        ElMessage({
          message: '请填写完账号!',
          type: 'warning',
        })
        return false;
      }
      const loading = ElLoading.service({
        lock: true,
        text: 'Loading',
        background: 'rgba(0, 0, 0, 0.7)',
      })
  
      data.active = 2
      loading.close()
      data.tableData.name = data.name;
      data.tableData.phone = data.phone;
      data.tableData.money = data.money;
      console.log(data.tableData, "=========")
  
      return;
    }
    if (data.active == 2) {
      const result=await VIPRecharge({phone:data.phone,money:data.money})
      data.active = 3
    }
    if (data.active == 3) {
      ElNotification({
        title: 'Success',
        message: '充值成功!',
        type: 'success',
      })
    }
  }
  </script>
  
  <style scoped>
  .head {
    height: 100px;
    width: 100%;
    background-color: white;
  }
  
  .form {
    position: relative;
    left: 220px;
    top: 15px;
  }
  
  .mybody {
  
    width: 100%;
    height: 100vh;
    background-color: #F0F2F5;
    overflow: hidden; 
  }
  
  .step {
  
    background: white;
    margin: 16px;
    padding: 16px;
    border-radius: 6px;
  }
  
  .alert {
    width: 70%;
    align-content: center;
    margin-top: 30px;
    position: relative;
    left: 200px;
  }
  
  .mytable {
    width: 1000px;
    height: 260px;
    border: 1px solid #E8E8E8;
    border-radius: 6px;
    margin-top: 25px;
    position: relative;
    left: 200px;
  }
  
  .tr1 {
    display: flex;
    width: 100%;
    height: 65px;
    border-bottom: 1px solid #eee;
  }
  
  .tr2 {
    display: flex;
    width: 100%;
    height: 65px;
    border-bottom: 1px solid #eee;
  }
  
  .tr3 {
    display: flex;
    width: 100%;
    height: 65px;
    border-bottom: 1px solid #eee;
  }
  
  .tr4 {
    display: flex;
    width: 100%;
    height: 65px;
  }
  
  .title {
    color: black;
    width: 165px;
    border-right: 1px solid #eee;
    background-color: #F7F7F7;
    font-size: 18px;
    align-content: center;
    padding-left: 65px;
  }
  
  .content1 {
    color: black;
    align-content: center;
    padding-left: 16px;
    font-size: 16px;
  }
  
  .content2 {
    color: black;
    align-content: center;
    padding-left: 16px;
    font-size: 22px;
  }
  
  .img {
    position: relative;
    left: 670px;
    padding-top: 80px;
  }
  
  .t1 {
    color: black;
    font-size: 24px;
    position: relative;
    left: 655px;
    padding-top: 20px;
  }
  
  .t2 {
    color: #A3A3A3;
    font-size: 18px;
    position: relative;
    left: 630px;
    padding-top: 20px;
  }
  
  .t3 {
    color: black;
    font-size: 20px;
    padding: 16px;
  }
  .t4{
    color:rgb(106, 19, 19);
    padding-left:16px ;
  }
  
  .myhr {
    margin-top: 30px;
    color: #D9D9D9;
  }
  .mysm{
    margin-top:20px ;
    width: 100%;
    height: 200px;
    background: #EAEEFD;
    border-radius: 6px;
  }
  .sm{
    color: black;
    font-size: 20px;
    padding-left:16px ;
    padding-top: 12px;
  }
  .sm1{
    color: black;
    font-size:18px;
    padding-left:14px ;
    margin-top: 8px;
  
  }
  .sm2{
    color: black;
    font-size:16px;
    margin-top: 10px;
    padding-left: 16px;
  }
  .sm3{
    color: black;
    font-size:18px;
    padding-left:16px ;
    padding-top: 8px;
  }
  .sm4{
    color: black;
    font-size:16px;
    margin-top: 10px;
    padding-left: 16px;
  }
  </style>